<template>
  <div class="mini-search" v-if="scrollTag">
    <div class="container">
      <div class="mini-logo">
        <nuxt-link to="/"><img src="~assets/img/logo.png" width="126" height="34"/></nuxt-link>
      </div>

      <div class="mini-search-input">
        <el-select v-model="searchCate" class="search-cate" placeholder="请选择">
          <el-option
            v-for="item in searchTypes"
            :key="item.title"
            :label="item.title"
            :value="item.type">
          </el-option>
        </el-select>

        <input type="text" class="search-key" maxlength="30"
               :placeholder="`请输入您要查询的${searchCate == 0 ? '商品' : '企业'}名称`"
               v-model.trim="searchText"
               @keyup.13="search($event)">

        <button class="search-btn" @click.prevent="search()">搜索</button>

      </div>

    </div>
  </div>
</template>

<script>
  export default {
    props: {
      searchTypes: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    data () {
      return {
        searchCate: this.$route.name === 'enterprise' ? 1 : 0,
        scrollTag: false,
        searchText: this.$route.query.q
      }
    },
    mounted () {
      this.showMiniSearch()
      window.addEventListener('scroll', this.showMiniSearch, false)
    },

    destroyed () {
      window.removeEventListener('scroll', this.showMiniSearch, false)
    },

    methods: {
      search () {
        this.$emit('changeMiniSearch', {searchType: this.searchCate, keyword: this.searchText})
      },
      // 是否显示MINI搜索
      showMiniSearch () {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        if (scrollTop > 205) {
          this.scrollTag = true
        } else {
          this.scrollTag = false
        }
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import "../element-variables";

  .mini-search {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    padding: 8px 0;
    background: #fff;
    border-bottom: 1px solid #dedede;
    z-index: 2000;
    .mini-logo {
      float: left;
    }
    .mini-search-input {
      float: right;
      width: 670px;
      margin-right: 85px;
      border: 1px solid $--color-primary;
      .search-cate {
        float: left;
        width: 90px;
        height: 32px;
        border-right: 1px solid $--color-primary;
      }

      .search-key {
        float: left;
        width: 509px;
        height: 32px;
        padding: 5px;
        border: none;

        &:focus, &:active, &:hover {
          outline: none;
        }
      }

      .search-btn {
        float: right;
        width: 69px;
        height: 32px;
        color: #fff;
        line-height: 32px;
        background: $--color-primary;
        border: 0;
      }

    }
  }
</style>

<style lang="scss">
  .el-select .el-input.is-focus .el-input__inner {
    border-color: transparent;
  }

  .mini-search .el-input__inner {
    height: 32px;
    border: none;
  }

  .el-select-dropdown.el-popper {
    margin-top: 1px !important;
  }

</style>
